import React,{useState,useEffect} from 'react'
import ReactEcharts from 'echarts-for-react'

export default function Sales(props) {

  const {data,chooseData}=props

  const [showDate, setShowDate] = useState([])

  useEffect(() => {
    function handleFun(data){
      let result=[['product']]
      data[0].data.forEach(i=>result[0].push(i.name))
      data.forEach(i=>{
        let res=[]
        res.push(i.name)
        i.data.forEach(i=>{
          res.push(i.data.reduce((p,c)=>{p+=c.data.reduce((p,c)=>p+c);return p},0))
        })
        result.push(res)
      })
      return result
    }
    if(chooseData.length!==0){
      setShowDate(handleFun(chooseData))
    }else{
      setShowDate(handleFun(data))
    }
    
  }, [data,chooseData]);

  const option={
    legend: {},
    tooltip: {},
    dataset: {
      source: showDate
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'}
    ]
  }

  return (
    <div>
      <ReactEcharts option={option}></ReactEcharts>
    </div>
  )
}
